<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="ContainerIndent">
            <p:panel>
                <h:form>
                    <p:dataGrid var="car"
                                value="#{dataGridView.cars}"
                                columns="3"
                                layout="grid"
                                rows="12"
                                paginator="true"
                                id="cars"
                                paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                rowsPerPageTemplate="6,12,16">
                        <f:facet name="header">
                            DataGrid
                        </f:facet>

                        <p:panel header="#{car.id}" style="text-align:center">
                            <h:panelGrid columns="1" style="width:100%">
                                <h:outputText value="#{car.brand}"/>

                                <h:outputText value="#{car.year}" />

                                <h:outputText value="#{car.color}"/>
                            </h:panelGrid>
                        </p:panel>

                        <f:facet name="footer">
                            DataGrid Footer
                        </f:facet>
                    </p:dataGrid>

                    <div class="EmptyBox30"/>

                    <p:dataList value="#{dataListView.cars2}"
                                var="car"
                                type="ordered"
                                paginator="true"
                                rows="10">
                        <f:facet name="header">
                            DataList
                        </f:facet>

                        #{car.brand}, #{car.year}, #{car.color}

                        <f:facet name="footer">
                            DataList Footer
                        </f:facet>
                    </p:dataList>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">PickList</span>
                    <div class="EmptyBox10"/>

                    <p:pickList id="pickList"
                                value="#{pickListView.cities}"
                                var="cities"
                                itemLabel="#{cities}"
                                itemValue="#{cities}"
                                effect="bounce"
                                showSourceControls="true"
                                showTargetControls="true"
                                showSourceFilter="true"
                                showTargetFilter="true"
                                filterMatchMode="contains"
                                addLabel="Add"
                                addAllLabel="Add All"
                                removeLabel="Remove"
                                removeAllLabel="Remove All"
                                moveTopLabel="Move Top"
                                moveUpLabel="Move Up"
                                moveDownLabel="Move Down"
                                moveBottomLabel="Move Bottom">
                        <f:facet name="sourceCaption">Source</f:facet>
                        <f:facet name="targetCaption">Target</f:facet>

<!--                        <p:ajax event="transfer" listener="#{pickListView.onTransfer}" update="msg" />
                        <p:ajax event="select" listener="#{pickListView.onSelect}" update="msg" />
                        <p:ajax event="unselect" listener="#{pickListView.onUnselect}" update="msg" />
                        <p:ajax event="reorder" listener="#{pickListView.onReorder}" update="msg" />-->
                    </p:pickList>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">OrderList</span>
                    <div class="EmptyBox10"/>

                    <p:orderList value="#{orderListView.cities}"
                                 var="city"
                                 controlsLocation="left"
                                 itemLabel="#{city}"
                                 itemValue="#{city}"
                                 moveUpLabel="Move Up"
                                 moveTopLabel="Move Top"
                                 moveDownLabel="Move Down"
                                 moveBottomLabel="Move Bottom">
<!--                        <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
                        <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
                        <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>-->

                        <f:facet name="caption">Order List</f:facet>
                    </p:orderList>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">Carousel</span>
                    <div class="EmptyBox10"/>

                    <p:carousel value="#{carouselView.cars}"
                                var="car"
                                headerText="Carousel"
                                itemStyleClass="carItem"
                                itemStyle="width:200px;height:150px;text-align:center">
                        <h:panelGrid columns="2" style="width:100%" columnClasses="label,value">
                            <h:outputText value="Id:" />
                            <h:outputText value="#{car.id}" />

                            <h:outputText value="Year" />
                            <h:outputText value="#{car.year}" />

                            <h:outputText value="Color:" />
                            <h:outputText value="#{car.color}" style="color:#{car.color}"/>

                            <h:outputText value="Price" />
                            <h:outputText value="$#{car.price}" />
                        </h:panelGrid>

                        <f:facet name="footer">
                            Carousel Footer
                        </f:facet>
                    </p:carousel>
                    <style type="text/css">
                        .carItem {
                            width:200px;
                            height:200px;
                            text-align:center;
                        }

                        .carouselAdvanced .carItem {
                            width: 250px;
                            height: 195px;
                        }

                        .value {
                            font-weight: bold;
                        }

                        .ui-carousel {
                            display: block;
                            margin-bottom: 20px;
                        }
                    </style>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">Schedule</span>
                    <div class="EmptyBox10"/>

                    <p:schedule id="schedule"
                                value="#{scheduleView.eventModel}"
                                locale="en_US"
                                timeZone="GMT+6">
<!--                        <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
                        <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />-->
                    </p:schedule>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">Tree (Single And Checkbox)</span>
                    <div class="EmptyBox30"/>

                    <p:panelGrid  columns="2" layout="grid">
                        <p:tree value="#{treeSelectionView.root1}"
                                var="doc"
                                selectionMode="single"
                                selection="#{treeSelectionView.selectedNode}">
                            <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                                <h:outputText value="#{doc.name}"/>
                            </p:treeNode>
                            <p:treeNode type="document" icon="ui-icon-document">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="picture" icon="ui-icon-image">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="mp3" icon="ui-icon-music">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                        </p:tree>

                        <p:tree value="#{treeSelectionView.root3}"
                                var="doc"
                                selectionMode="checkbox"
                                selection="#{treeSelectionView.selectedNodes2}">
                            <p:treeNode icon="ui-icon-note">
                                <h:outputText value="#{doc.name}"/>
                            </p:treeNode>
                            <p:treeNode type="document" icon="ui-icon-document">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="picture" icon="ui-icon-image">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="mp3" icon="ui-icon-music">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                        </p:tree>
                    </p:panelGrid>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">Tree (DragDrop)</span>

                    <h:panelGrid columns="3">
                        <p:tree id="tree5"
                                value="#{treeDNDView.root1}"
                                var="node"
                                selectionMode="single"
                                selection="#{treeDNDView.selectedNode1}"
                                draggable="true"
                                droppable="true"
                                dragdropScope="demo">
<!--                            <p:ajax event="dragdrop" listener="#{treeDNDView.onDragDrop}" update=":form3:msgs" />-->
                            <p:treeNode>
                                <h:outputText value="#{node}" />
                            </p:treeNode>
                        </p:tree>

                        <p:graphicImage alt="Transfer"
                                        value="#{resource['primefaces-sentinel:images/left-right-arrow-gray.svg']}"
                                        style="width:50px;" />

                        <p:tree id="tree6"
                                value="#{treeDNDView.root2}"
                                var="node"
                                selectionMode="single"
                                selection="#{treeDNDView.selectedNode2}"
                                draggable="true"
                                droppable="true"
                                dragdropScope="demo">
<!--                            <p:ajax event="dragdrop" listener="#{treeDNDView.onDragDrop}" update=":form3:msgs" />-->
                            <p:treeNode>
                                <h:outputText value="#{node}" />
                            </p:treeNode>
                        </p:tree>
                    </h:panelGrid>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">TreeTable</span>
                    <div class="EmptyBox10"/>

                    <p:treeTable value="#{ttSelectionView.root1}"
                                 var="document"
                                 selectionMode="single"
                                 selection="#{ttSelectionView.selectedNode}"
                                 style="margin-top:0">
                        <f:facet name="header">
                            Single
                        </f:facet>

                        <p:column headerText="Name" sortBy="#{document.name}">
                            <h:outputText value="#{document.name}" />
                        </p:column>
                        <p:column headerText="Size">
                            <h:outputText value="#{document.size}" />
                        </p:column>
                        <p:column headerText="Type">
                            <h:outputText value="#{document.type}" />
                        </p:column>

                        <f:facet name="footer">
                            TreeTable Footer
                        </f:facet>
                    </p:treeTable>

                    <div class="EmptyBox30"/>

                    <p:treeTable value="#{ttSelectionView.root3}"
                                 var="document"
                                 selectionMode="checkbox"
                                 selection="#{ttSelectionView.selectedNodes2}">
                        <f:facet name="header">
                            Checkbox
                        </f:facet>
                        <p:column headerText="Name">
                            <h:outputText value="#{document.name}" />
                        </p:column>
                        <p:column headerText="Size">
                            <h:outputText value="#{document.size}" />
                        </p:column>
                        <p:column headerText="Type">
                            <h:outputText value="#{document.type}" />
                        </p:column>
                    </p:treeTable>

                    <div class="EmptyBox30"/>

                    <span class="FontBold Fs18 hardblue">Horizontal Tree</span>
                    <div class="EmptyBox30"/>

                    <p:tree value="#{treeSelectionView.root1}"
                            var="doc"
                            orientation="horizontal"
                            selectionMode="single"
                            selection="#{treeSelectionView.selectedNode}">
                        <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                            <h:outputText value="#{doc.name}"/>
                        </p:treeNode>
                        <p:treeNode type="document" icon="ui-icon-document">
                            <h:outputText value="#{doc.name}" />
                        </p:treeNode>
                        <p:treeNode type="picture" icon="ui-icon-image">
                            <h:outputText value="#{doc.name}" />
                        </p:treeNode>
                        <p:treeNode type="mp3" icon="ui-icon-video">
                            <h:outputText value="#{doc.name}" />
                        </p:treeNode>
                    </p:tree>
                </h:form>
            </p:panel>
        </div>
    </ui:define>
</ui:composition>